جهان اطلاعات
جدیدترین مطالب علمی، فناوری وکاربردی جهان
CSS Specificity یکی از مشکل ترین مباحث در CSS است. زمانی که به یک المنت
خاص در HTML (مثلا ) دو دستور سی اس اس (CSS) متفاوت (مثلا دو
background یکی آبی و یکی قرمز) می دهید، مرورگر با توجه به CSS
Specificity تصمیم می گیرد که کدام دستور را اجرا کند.
درک این مبحث برای استاد شدن در سی اس اس نویسی کاملا الزامی است. برای
همین است که گاهی دستورهای سی اس اس شما اجرا نمی شوند و یا دستوری که قبلا
به خوبی کار می کرده در اثر دستور دیگری از کار می افتد. برای رفع این
مشکلات شما نیاز به یک
درک عمیق از specificity (اختصاصی بودن)
دارید. پس از درک این مبنا حل کردن مشکلات و رفع باگ هایی که در طراحی سایت ها به آنها برمی خورید، بسیار آسان تر خواهند شد.
در عکس بالا چهار روش کلی دادن دستورات سی اس اس را می بینید. در این مقاله
قصد داریم، توضیحاتی راجع به مفاهیم اولیه سی اس اس بدهیم، در مقاله بعد
(قسمت دوم) به توضیح مفصل specificity خواهیم پرداخت و قسمت سوم را نیز با
مثال های تکمیلی به اتمام می رسانیم. در ضمن در صورتی که از قبل با مبحث
specificity آشنایی دارید باز هم توصیه می کنیم که این مقاله و قسمت دوم را
حتما مطالعه کنید. مطمئنا در آنها نکات مفید فراوانی خواهید یافت. پس در
ادامه با ما باشید.
در اچ تی ام ال (HTML) به هر یک از علایمی که با علامت های بزرگتر و کوچکتر
(> و <) مشخص می شوند، المنت می گویند. مانند: ،
در سی اس اس (CSS) نیز ساختار کلی به این شکل است:
مانند:
در بالا به متونی که خارج از علامت آکولاد قرار دارند سلکتور (selector =
انتخابگر) می گویند. زیرا شما با استفاده از آنها، از داخل سی اس اس می
توانید یک المنت اچ تی ام ال را انتخاب کنید و به آن استایل بدهید (style
به دستورات سی اس اس یا همان property و value در مثال بالا گفته می شود).
سلکتورها انواع مختلفی دارند:
در زیر مثال هایی از سودوکلاس ها آورده ایم:
focus: در input:focus که فیلدی را که مکان نما داخلش است را انتخاب می کند.
First Second Third
- سودوالمنت ها (Pseudo-elements = المنت های کاذب) که برای اضافه کردن
افکت های (effect) خاص تصویری به بعضی سلکتورها استفاده می شوند. مانند
first-line: یا after: در مثال های زیر:
سودوکلاس ها دستوراتی محدود به خود المنت ها هستند. آنها المنت ها را هدف
می گیرند. برای مثال تعیین می کنید زمانی که موس روی المنتی برود، چه
اتفاقی بیفتد. در سودوکلاس ها اهمیتی وجود ندارد که داخل المنت ها چه نوشته
است.
اما سودوالمنت ها، زیر المنت ها را هدف می گیرند و جزئی تر هستند. مثلا با
استفاده از آنها می توانید تعیین کنید حرف اول داخل یک المنت بزرگ نوشته
شود. یا متن خط اول یک المنت به رنگ خاصی در بیاید.
در زیر مثال هایی از سودوالمنت ها آورده ایم:
first-letter: در p:first-letter که اولین حرف را در المنت های هدف می گیرد.
در اچ تی ام ال اشاره می کند.
Style attribute: معنی تحت الفظی آن «صفت های استایلی» است. گفتیم که
استایل به دستورات سی اس اس (CSS) گفته می شود. منظور از «استایل اتریبیوت»
همان استایل هایی هستند که به عنوان اتریبیوت داخل المنت های HTML داده می
شوند. مثلا:
اتریبیوت (attribute = صفت): برای توضیح آسان تر مثال می زنیم.
در مثال بالا به هر یک از href، title، target، id، class و style ها
اتریبیوت می گویند. هر یک از اینها صفتی از المنت a هستند. در سی اس اس با
اتریبیوت های id و کلاس بسیار کار می کنیم. اما می توانید با دیگر اتریبیوت
ها نیز کار کنید. مانند مثال های زیر:
کد بالا تمام المنت هایی که دارای اتریبیوت title باشند را هدف می گیرد.
کد بالا تمام المنت هایی که دارای title=W3Schools باشند را هدف می گیرد.
این اتریبیوت، آنهایی را که داخل title شان کلمه hello داشته باشند را هدف می گیرد. مثلا title=good hello to you
علامت پایپ (| = لوله = pipe) در زمان هایی که بین مقادیر علامت (- =
hyphen = خط فاصله) وجود داشته باشد، تمام آنها را با مقدار داده شده
مقایسه می کند. به عبارت دیگر دستور بالا چیزی مانند را هدف می گیرد.
دستورات بالا در زمانی که نخواهید به تمام المنت های فرم ها کلاس یا آی دی (id) بدهید بسیار مفید هستند.
توجه کنید که دستورات اتریبیوت، بعضی از سودوکلاس ها و سودو المنت ها در اینترنت اکسپلوررهای ۸ و قدیمی تر کار نمی کنند.
همان طور که دیدید، تمام این مقاله صرف توضیح اصطلاحات اولیه شد. در مقاله بعد به توضیح مفصل مبحث specificity خواهیم پرداخت. عکس بالا روش
های مختلف استایل دادن را نمایش می دهد. بر اساس قانون specificity، هر یک
از سلکتورها وزن های مختلفی دارند. برای مثال وزن و اختصاصی بودن «id» از
«کلاس» بیشتر است و «کلاس» از «المنت» ها. طریقه معمول برای اندازه گیری
میزان specificity یک دستور سی اس اس آسان است: برای هر یک از سکلتورهای
آن، یک امتیاز در نظر می گیریم و با جمع آنها میزان specificity یک دستور
محاسبه می شود. بر این اساس امتیاز Style attribute هزار، id صد، کلاس
معادل ۱۰ و المنت ها مساوی ۱ است.
در ادامه ضمن مثال هایی، توضیح کامل این مبنا را آورده ایم.
در مثال بالا می بینید که دستور مورد نظر دارای یک id (معادل ۱۰۰ امتیاز)،
یک کلاس (معادل ۱۰ امتیاز) و سه المنت (معادل سه امتیاز) است. پس مجموع
امتیاز این دستور ۱۱۳ است.
عبارت ابتدایی دستور بالا به المنت body ای اشاره دارد که کلاس ie7 دارد. منظور از
علامت تیلدی (~)
که در بالا می بینید، این است که استایل را فقط به المنت h2 ای اعمال کن
که در اچ تی ام ال بعد از یک body.ie7 .col_3 h2 آمده باشد. برای توضیح
بیشتر به
اینجا
مراجعه کنید. در مقالات آینده این علامت ها را مفصل توضیح خواهیم داد.
علامت ستاره (* = asterisk)
در سی اس اس general selector (انتخابگر عمومی) نام دارد و دستوراتی که به
آن داده شوند به تمام المنت های صفحه اعمال می شوند. برای مثال دستور زیر،
رنگ بکگراند (background) تمام المنت های یک صفحه وب را آبی می کند:
با توجه به اینکه * به تمام المنت های صفحه اشاره دارد، امتیاز صفر به آن تعلق می گیرد و در جمع بندی حساب نمی شود.
()not: به معنی این است که هر آنچه داخل پرانتز است را، انتخاب نکن! در
مثال های زیر، خط اول تمام المنت های صفحه به جز المنت های div را انتخاب
می کند. خط دوم هم به تمام المنت های صفحه که کلاس classname را نداشته
باشند، اعمال می شود.
گرچه not تقریبا جزو Pseudo class ها محسوب می شود (علامت «:» دارد)، اما
به خودی خود کمکی به دقیق تر (specific) شدن دستور نمی کند (به همین دلیل
امتیاز ۱۰ خط خورده است و امتیاز صفر گرفته است). اما سلکتوری که داخل
پرانتزش می آید در امتیازبندی حساب می شود.
دستوراتی که داخل اچ تی ام ال (HTML) داده می شوند ۱۰۰۰ امتیاز دارند و از تمامی دستورات قبلی مهم تر هستند.
«علامت بزرگتر» (>) که در بالا می بینید به معنای این است که المنت li
سمت راست علامت بزرگتر، باید فرزند مستقیم ul در سمت چپ علامت باشد. برای
درک بهتر مثال زیر را ببینید:
John 1 John 2
در مثال بالا می بینید که زمانی که از «علامت بزرگتر» استفاده کنید فقط
آنهایی را هدف می گیرد که المنت سمت راستی (b) دقیقا فرزند مستقیم سمت چپی
(div) باشد. اما اگر از علامت بزرگتر استفاده نکنید به معنای این است که
دستور را به تمام المنت های b که از خاندان div هستند اعمال کند (دیگر فرقی
نمی کند که b فرزند، نوه، نتیجه، نبیره یا ندیده div باشد :) )
اما هنوز یک گزینه دیگر برای سنگین تر و specific کردن وجود دارد: اضافه
کردن important! به انتهای هر یک از استایل ها. می توانید امتیاز این دستور
را ۱۰۰۰۰ بدانید. مانند زیر:
دستور بالا امتیازی برابر ۱۰۱۱۲ را دارد (دو المنت + یک کلاس + یک آی دی +
دستور ایمپورتنت). important! قوی ترین چیزی است که داریم. تنها راهی که می
توانید دستوری قوی تر از دستور بالا بدهید اضافه کردن ایمپورتنت همراه با
آی دی های بیشتر است. برای مثال امتیاز دستور زیر ۱۰۲۰۰ است.
در زیر مثال های بیشتری را می آوریم:
یک حالت دیگر نیز وجود دارد. فرض کنید دو دستور امتیازی مشابه داشته باشند.
در این زمان دستوری که پایین تر نوشته شده باشد قوی تر است. در مثال زیر
بکگراند p آبی خواهد بود:
نکته: کدهای سی اس اسی که داخل اچ تی ام ال آمده باشند، در حالتی که امتیاز
آنها مساوی دستورات داخل فایل سی اس اس باشد، قوی تر محسوب می شوند. در
زیر کد اول داخل فایل سی اس اس و کد دوم داخل فایل اچ تی ام ال آمده است:
کد دوم دقیق تر و اختصاصی تر است و اجرا می شود.
چند نظر شخصی و توصیه هنگام کد نویسی:
در قسمت سوم این مطلب با مثال های باز هم بیشتر به جمع بندی مبحث
specificity خواهیم پرداخت. در صورتی که حس می کنید این مبحث را درک کرده
اید نیازی به خواندن قسمت سوم ندارید.
نظرات شما عزیزان:
تعاریف اولیه
selector {
property:value;
}
p {
background:red;
}
- آی دی (ID selector) مانند: section#
- کلاس (class selector) مانند: section.
- المنت (contextual selector) مانند: p span
- اتریبیوت (attribute selector) مانند: [p[title
- سودوکلاس ها (Pseudo-classes = کلاس های کاذب) که برای اضافه کردن افکت
های (effect) خاص تصویری به بعضی سلکتورها استفاده می شوند. مانند زیر:
selector:pseudo-class {
property:value;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
(lang(language: در (p:lang(it
first-child: در p:first-child که به اولین المنت های p در داخل
المنت والدش اشاره می کند. در مثال زیر المنت های p نقش فرزند و المنت div
نقش والد را دارد.
p:first-line { font-variant: small-caps; }
a:link:after { content: " (" attr(href) ")"; }
تفاوت pseudo-class و pseudo-element
first-line: در p:first-line که به اولین خط در المنت های
before: در p:before
after: در p:after
Nardebaan
[title] {
color:blue;
}
[title=W3Schools] {
border:5px solid green;
}
[title~=hello] { color:blue; }
[lang|=en] { color:blue; }
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
}
* {
background:blue;
}
*:not(div)
*:not(.classname)
div b { color: red; } /* every John is red */
div>b { color: red; } /* Only John 3 is red */
body div.page p#content {
background:red !important;
}
#page #content {
background:blue !important;
}
* { } /* 0 */
li { } /* 1 (one element) */
li:first-line { } /* 2 (one element, one pseudo-element) */
ul li { } /* 2 (two elements) */
ul ol+li { } /* 3 (three elements) */
h1 + *[rel=up] { } /* 11 (one attribute, one element) */
ul ol li.red { } /* 13 (one class, three elements) */
li.red.level { } /* 21 (two classes, one element) */
style='' /* 1000 (one inline styling) */
p { } /* 1 (one HTML selector) */
div p { } /* 2 (two HTML selectors) */
.sith { } /* 10 (one class selector) */
div p.sith { } /* 12 (two HTML selectors and a class selector) */
#sith { } /* 100 (one id selector) */
body #darkside .sith p { } /* 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) */
p {
background:red;
}
p {
background:blue;
}
#content h1 {
padding: 5px;
}
- تعیین امتیاز برای سلکتورها یک قانون رسمی محسوب نمی شود و فقط روشی
معروف برای درک آسانتر ماجرا است. برای مثال امتیاز ۱۵ کلاس می شود ۱۵۰.
اما یک آی دی با ۱۰۰ امتیاز، همچنان از ۱۵ کلاس هم قوی تر است.
- بهتر است از important! هرگز استفاده نکنید. استفاده از آن می تواند
مشکلات جدی ایجاد کند و دستوراتی را تولید کند که به هیچ وجه نمی توان آنها
را تغییر داد. سعی کنید با اضافه کردن آی دی ها به مقدار لازم دستور را
سنگین کنید ولی دست به important! نبرید.
- همیشه از حداقل تعداد سلکتورها استفاده کنید. نیازی نیست، در زمانی که لازم نباشد تعداد زیادی المنت و کلاس را پشت هم ردیف کنید.
- و در آخر: با توجه به اینکه آی دی از کلاس قوی تر است شاید بهتر باشد
همیشه از کلاس استفاده کنید و آی دی را برای زمانی که بخواهید دستورات قوی
بدهید کنار بگذارید. به این صورت که همیشه به جای آی دی به
قالب جدید وبلاگ پيچك دات نت